<template>
  <div class="b-video" ref="videoElement">
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const props = defineProps<{
  url: { 
    type: String, 
    required: true
  }
}>()

const player = ref<JessibucaPro>(null)
const videoElement = ref<HTMLDivElement>(null)
onMounted(() => {
  if (videoElement.value) {
    initPlayer(videoElement.value)
    watch(() => props.url, () => {
      player.value.play(props.url)
    }, {immediate: true})
  }
})
const BASE_URL = import.meta.env.BASE_URL
function initPlayer(dom: HTMLDivElement) {
  player.value = new window.JessibucaPro({
    container: dom,
    isResize: false,
    isFlv: true,
    decoder: BASE_URL + `jessibuca/decoder-pro-simd.js`,
    useMSE: true,
    useSIMD: true,
    hasAudio: false,
    loadingTimeout: 10,
    loadingTimeoutReplayTimes: 3,
    showBandwidth: true, // 显示网速
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
      record: true,
      performance: true
    },
  })
  // 播放成功
  player.value.on('play', (index) => {
    // 
  })
  // 超时
  player.value.on('timeout', (index) => {
    // `请求超时`
  })
  // 错误
  player.value.on('error', (index, err) => {
    // `分屏错误`
  })
  // 延迟超时
  player.value.on('delayTimeout', (index) => {
    // 
  })
  player.value.on('streamEnd', async (index) => {
    // this.retryPlay(index)
  })
}


</script>
<style scoped lang="scss">
.b-video{
  width: 100%;
  background-color: #333;
  flex: 1;
}
</style>
